<template>
    <el-form-item ref="uploadElement">
      <el-upload
        class="upload-demo"
        action="/api/admin/uploadFile"
        :auto-upload="true"
        name="file"
        :headers="{'Authorization':tokenStore.token}"
        :on-success="uploadFileSuccess"
        :show-file-list="false"
      >
        <!-- 图片预览区域 -->
        <div class="image-preview" v-if="imgUrl">
          <img :src="imgUrl" alt="Uploaded Image" class="image-preview-img" />
        </div>
        
        <!-- 上传按钮 -->
        <div class="button-group">
          <el-button type="success" class="upload-btn">上传图片</el-button>
        </div>
      </el-upload>
    </el-form-item>
  </template>
  
  <script setup>
  import { ref } from 'vue';
  import useTokenStore from '@/stores/token.js';
    const tokenStore = useTokenStore();
  const imgUrl = ref('/1.png');
  
  // 上传文件成功后的回调函数
  const uploadFileSuccess = (result) => {
    imgUrl.value ='/2.png';
  };
  </script>
  
  <style scoped>
  .upload-demo {
    width: 100%;
    max-width: 1000px;  /* 扩大最大宽度 */
    margin: 0 auto;
  }
  
  .image-preview {
    margin-bottom: 15px;
    text-align: center;
    border: 2px dashed #ddd;
    padding: 15px;
    background-color: #f8f8f8;
    border-radius: 8px;
  }
  
  .image-preview-img {
    max-width: 100%;
    max-height: 600px;  /* 扩大最大显示高度 */
    object-fit: contain;
    border-radius: 5px;
  }
  
  .button-group {
    display: flex;
    justify-content: space-between;
    gap: 15px;  /* 增加按钮之间的间隔 */
    margin-top: 15px;
  }
  
  .upload-btn {
    width: 100px;
    font-size: 16px;  /* 增加字体大小 */
    font-weight: 600;  /* 增加字体粗细 */
    border-radius: 5px;
  }
  
  .upload-btn:hover {
    opacity: 0.85;  /* 悬停时的透明度变化 */
  }
  </style>